<template>
  <div class="home">
    <van-search v-model="search_value" placeholder="请输入搜索关键词"  disabled
                shape="round"
                @click="handleClickOpenSearch"
    />
<!--    轮播图控件-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue" >
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt="" width="100%" >
      </van-swipe-item>
    </van-swipe>

<!--    轮播图下方分类栏-->
    <van-grid :column-num="5" irection="horizontal"  class="catefive" >
      <van-grid-item v-for="item in channel " :key="item.id" :icon="item.icon_url" :text="item.name" />
    </van-grid>

<!--    品牌商品区域-->
    <div class="brand">
      <div class="home_title">
        品牌制造商直供
      </div>
      <ul class="ul_brand">
        <li v-for="item in brandList" :key="item.id" class="brand_ul_li">
          <img :src="item.pic_url" alt=""  class="li_img"/>
          <h4 class="li_name">{{ item.name }}</h4>
          <p class="li_price">{{ item.floor_price  | RMBformat}}</p>
        </li>
      </ul>
    </div>


<!--    新品区域-->
    <div class="newProducts"  v-show="$route.meta.showFooter">
      <h4 class="newProducts_title">
        周一周四·新品首发
      </h4>
      <ul class="newProducts_ul">
        <li class="newProducts_li" v-for="item in newGoodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="" class="newProducts_img" />
          <div class="newProducts_name" >
            {{item.name}}
          </div>
          <section class="newProducts_price">
            {{item.retail_price | RMBformat}}
          </section>
        </li>
      </ul>
    </div>

<!--    人气商品区域-->
    <div class="hotGoods"  v-show="$route.meta.showFooter">
      <div class="hotGoods_title">
        人气推荐
      </div>
      <van-card
        v-for="(item,index) in hotGoodsList" :key="index"
        :thumb="item.list_pic_url" class="hotGoods_card"
      >
        <template #title >
          <p class="hotGoods_title1">{{item.name}} </p>
        </template>
        <template #desc >
          <p class="hotGoods_title2"> {{item.goods_brief}}</p>
        </template>
        <template #price>
          <div class="hotGoods_price">
            {{item.retail_price |RMBformat}}
          </div>
        </template>
      </van-card>
    </div>

<!--    专题商品区域-->
    <div class="zhuanti"  v-show="$route.meta.showFooter">
      <div class="zhuanti_title">
        专题精选
      </div>
<!--      专题商品轮播图-->
      <van-swipe class="zhuanti_swipe" :autoplay="3000"  :loop="false" :width="300">
        <van-swipe-item v-for="item in topicList" :key="item.id" class="zhuanti_swipe_item" >
          <div class="zhuanti_img">
            <img :src="item.item_pic_url" alt=""  width="100%" height="200px">
          </div>
<!--          文本区域-->
          <h2 class="zhuanti_text">
            {{item.title}}
           <span class="zhuanti_price">
            {{item.price_info | RMBformat}}
           </span>
           </h2>
           <p class="zhuanti_subtitle">
             {{item.subtitle}}
           </p>
        </van-swipe-item>
      </van-swipe>
    </div>

<!--    分类商品推荐区域-->
    <div class="categoryList" v-for="item in categoryList" :key="item.id"  v-show="$route.meta.showFooter">
      <h4 class="categoryList_title">
        {{item.name}}
      </h4>
      <ul class="categoryList_ul">
        <li class="categoryList_li" v-for="item1 in item.goodsList" :key="item1.id">
          <img :src="item1.list_pic_url" alt="" width="100%"/>
          <div class="categoryList_content">
            <div class="categoryList_title" >
              {{item1.name}}
            </div>
            <div class="categoryList_price">
              {{item1.retail_price | RMBformat}}
            </div>
          </div>
        </li>
      </ul>
    </div>


<!--    搜索弹出页-->
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>


  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'
// import axios from 'axios'

import request from '@/request/request'
import { getBrand, GetBrandList, GetHomeList, GetSearchPopupData } from '@/request/api'
import HistorySearch from '@/components/HistorySearch'

export default {
  name: 'Home',
  components: { HistorySearch },
  data () {
    return {
      value:'',
      search_value:'',
      banner:[],  //轮播图数据
      channel:[],  //轮播图下的分类
      brandList:[],  //制造商数据
      newGoodsList:[],  //新品数据
      hotGoodsList:[],  //人气商品数据
      topicList:[], //专题商品数据
      categoryList:{},  //分类商品数据


    }
  },
  created () {

    this.getHomeList()

  },
  computed: {},
  methods: {
    getHomeList(){
      GetHomeList().then(res=>{
        console.log('首页数据：')
        console.log(res)
        this.banner=res.data.banner
        this.channel=res.data.channel
        this.brandList=res.data.brandList
        this.newGoodsList=res.data.newGoodsList
        this.hotGoodsList=res.data.hotGoodsList
        this.topicList=res.data.topicList
        this.categoryList=res.data.categoryList

      }).catch(err=>{
        console.log(err)
      })
    },
    // 打开搜索弹出窗口，阴影窗口打开
    handleClickOpenSearch(){
      this.$router.push('/home/searchPopup')
      // this.$store.commit('changeIsShowPopupShadow',true)
    },

  }
}
</script>

<style lang="less" >
.home{
  font-size: .18rem;
  font-family: '黑体';
}

.van-swipe__indicators{
  margin-bottom: 15px;
}
.popup-shadow{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 98;
}
.catefive{
  margin-top: -15px;
}

//品牌产品样式
.brand{
  background: white;
  margin-top: 20px;
  .home_title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .ul_brand{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .brand_ul_li{
      width: 49%;
      position: relative;
      .li_img{
        width: 100%;
      }
      .li_name{
        font-size: 13px;
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .li_price{
        font-size: 13px;
        position: absolute;
        top: 40px;
        left: 10px;
        color: #8b0000;
      }
    }
  }
}

//新品样式
.newProducts{
  background-color: white;
  margin-top: 20px;
  .newProducts_title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .newProducts_ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    .newProducts_li{
      width: 49%;
      background-color: #fff;
      text-align: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      .newProducts_img{
        width: 100%;
        display: block;
      }
      .newProducts_name{
        font-size: 13px;
      }
      .newProducts_price{
        font-size: 13px;
        margin-top: 5px;
        color: darkred;
      }
    }
  }
}

//人气商品样式
.hotGoods{
  margin-top: 20px;
  background-color: white;
  width: 100%;
  .hotGoods_title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .hotGoods_title1{
    max-height: 32px;
    font-weight: 500;
    line-height: 29px;
    font-size: 18px;
  }
  .hotGoods_title2{
    max-height: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }

  .hotGoods_price{
    line-height: 20px;
    color: darkred;
    font-size: 9px;
  }
}

//专题轮播图样式
.zhuanti{
  margin-top: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 0 8px;
  .zhuanti_title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }

  .zhuanti_swipe{
    position: relative;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    .zhuanti_swipe_item{
      margin-right: 15px;
      height: auto;
      padding-bottom: 10px;
      background-color: #fff;
      .zhuanti_text{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        line-height: 40px;
        font-size: 15px;
        width: 90%;
        .zhuanti_price{
          color: darkred;
        }
      }
      .zhuanti_subtitle{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 90%;
        font-size: 13px;
      }
    }
  }
}

//分类产品样式
.categoryList{
  padding-top: 20px;
  background-color: #fff;
  .categoryList_title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .categoryList_ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .categoryList_li{
      float: left;
      width: 49%;
      margin-bottom: 10px;
      background-color: #fff;
      .categoryList_content{
        text-align: center;
        font-size: 14px;
        .categoryList_title{
          width: 100%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 14px;

        }
        .categoryList_price{
          line-height: 1px;
          color: darkred;
          font-size: 14px;
        }
      }
    }
  }
}



</style>
